<template>
  <div class="app-container">
    <div>
      <el-button type="primary" icon="el-icon-plus" @click="addChapter()"
        >添加章节</el-button
      >
    </div>
    <!-- 章节列表 -->
    <ul class="chapterList">
      <li v-for="chapter in chapterList" :key="chapter.id">
        <p>
          {{ chapter.title }}

          <span style="float: right;">
            <el-button
              type="text"
              style="color: blue;"
              @click="addVideo(chapter.id)"
              >添加课时</el-button
            >
            <el-button
              type="text"
              @click="editChapter(chapter.id)"
              style="color: blue;"
              >编辑</el-button
            >
            <el-button
              type="text"
              @click="removeChapterById(chapter.id)"
              style="color: red;"
              >删除</el-button
            >
          </span>
        </p>
        <ul class="chapterList videoList">
          <li v-for="video in chapter.children" :key="video.id">
            <p>
              {{ video.title }}

              <span>
                <el-tag type="danger" v-if="!video.videoSourceId" size="mini"
                  >尚未上传任何视频</el-tag
                >
                <div style="float: right;">
                  <el-tag v-if="video.free" size="mini" type="success"
                    >免费观看</el-tag
                  >
                  <el-button type="text" @click="editVideo(video.id)"
                    >编辑</el-button
                  >
                  <el-button type="text" @click="removeVideoById(video.id)"
                    >删除</el-button
                  >
                </div>
              </span>
            </p>
          </li>
        </ul>
      </li>
    </ul>
    <!-- 章节列表对话框 -->
    <FormVue ref="formVue"></FormVue>
    <!-- 课时表单对话框后 -->
    <videoComponents ref="videoForm"></videoComponents>
    <div style="text-align:center;">
      <el-button type="primary" @click="prev()">上一步</el-button>
      <el-button type="primary" @click="next()">下一步</el-button>
    </div>
  </div>
</template>

<script>
import video from "../../../../api/video";
import videoComponents from "../Video/Form.vue";
import chapter from "../../../../api/chapter";
import FormVue from "./Form.vue";
export default {
  components: { FormVue, videoComponents },
  data() {
    return {
      chapterList: [], //章节列表
    };
  },
  created() {
    this.initChapterList();
  },
  methods: {
    editVideo(videoId) {
      this.$refs.videoForm.edit(true, videoId);
    },
    addVideo(id) {
      this.$refs.videoForm.open(true, id);
    },
    editChapter(id) {
      // console.log(id);
      this.$refs.formVue.open(true, id);
    },
    addChapter() {
      this.$refs.formVue.open(true);
    },
    /**
     * 根据id删除video
     * @param {*} id
     */
    removeVideoById(id) {
      this.$confirm("此操作将永久删除该课时是否继续？", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          video.removeVideoById(id).then((resp) => {
            if (resp) {
              this.$message.success(resp.message);
              this.initChapterList();
            }
          });
        })
        .catch(() => {
          this.$message.info("取消删除");
        });
    },
    /**
     * 删除章节
     * @param {*} id
     */
    removeChapterById(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          chapter.removeChapterById(id).then((resp) => {
            if (resp) {
              this.$message.success(resp.message);
              this.initChapterList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    /**
     * 初始化章节信息
     */
    initChapterList() {
      chapter.initChapterTreeList(this.$parent.courseId).then((resp) => {
        if (resp) {
          this.chapterList = resp.data.items;
          // console.log(this.chapterList);
        }
      });
    },
    prev() {
      this.$parent.active = 0;
    },
    next() {
      this.$parent.active = 2;
    },
  },
};
</script>

<style>
.chapterList {
  border: 1px solid #999d9c;
  font-size: 20px;
}
.chapterList .videoList {
  border: 1px dashed #ddd;
  font-size: 17px;
  /* float: right; */
}

ul li {
  list-style-type: none;
}
li {
  height: fit-content;
}
.ids {
  display: block;
  float: right;
}
</style>
